<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			.father3D {
				position: absolute;
				width: 300px;
				height: 300px;
				padding: 10px;
				margin: 10px;
				perspective: 1000px;
				transform-style: preserve-3d;
				perspective-origin: 150px 150px;
				animation: haha 5s ease infinite;
			}
			.qian ,.zuo,.you,.shang,.xia,.hou{
				left: 0;
				top: 0;
				right: 0;
				bottom: 0;
				margin: auto;
				transform-origin: 50px 50px -50px;
				position: absolute;
				width: 100px;
				height: 100px;
			}
			.zuo {
				background: green;
				animation: myzuo 10s linear infinite;
			}
			.qian {
				background: red;
				animation: myqian 10s linear infinite;
			}
			.shang{
				background-color: antiquewhite;
				animation: myshang 10s linear infinite;
			}
			.you{
				background-color: aqua;
				animation: myyou 10s linear infinite;
			}
			.xia{
				background-color: blue;
				animation:myxia 10s linear infinite;
			}
			.hou{
				background-color: brown;
				animation: myhou 10s linear infinite;
			}
			@keyframes myhou{
				from{
					transform: rotateX(180deg) rotateY(0deg) rotateZ(180deg);
				}
				to{transform: rotatex(180deg) rotateY(-360deg) rotateZ(180deg);}
			}
			@keyframes myxia{
				from{
					transform: rotateX(-90deg) rotateZ(0deg);
				}
				to{
					transform: rotateX(-90deg) rotateZ(360deg);
				}
			}
			@keyframes myyou{
				from{transform: rotateY(90deg) ;}
				to{transform: rotateY(450deg);}
			}
			@keyframes myshang{
				from{transform: rotateX(90deg) rotateZ(0deg); }
				to{
					transform: rotateX(90deg) rotateZ(-360deg);
				}
			}
			@keyframes shidian {
				from {
					perspective-origin: 10px 10px;
				}
				to {
					perspective-origin: 10px 10px;
				}
			}
			
			@keyframes myzuo {
				from {
					transform: rotateY(-90deg);
				}
				to {
					transform: rotateY(270deg);
				}
			}
			
			@keyframes myqian {
				from {
					transform: rotateY(0deg);
				}
				to {
					transform: rotateY(360deg);
				}
			}
			@keyframes haha{
				0% {
					transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
					transform-origin: center center;
				}
				100% {
					transform: rotateX(180deg) rotateY(180deg) rotateZ(180deg);
					transform-origin: center center;
				}
			}
		</style>
	</head>

	<body>
		<div class="father3D">
			<div class="zuo">左</div>
			<div class="you">右</div>
			<div class="qian">前</div>
			<div class="hou">后</div>
			<div class="shang">上</div>
			<div class="xia">下</div>
		</div>
	</body>

</html>